<template>
  <view>
    <u-navbar title="健康商城" :is-back="false" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#222" back-icon-color="#222">
      <view class="slot-wrap">
        <view class="" style="display: flex; align-items: center; margin-right: 20rpx">
          <image src="https://wenzhen.fuerle168.com/static/shop/shopcar.png" mode="" style="width: 38rpx; height: 38rpx; margin-left: 30rpx" @tap="car"></image>
          <image src="https://wenzhen.fuerle168.com/static/shop/user.png" mode="" style="width: 38rpx; height: 38rpx; margin-left: 30rpx" @tap="user"></image>
        </view>
      </view>
    </u-navbar>
    <!-- 轮播图 -->
    <view class="wrap" style="margin: 24rpx 28rpx; height: 300rpx">
      <u-swiper :list="list" height="300"></u-swiper>
    </view>
    <!-- 功能区 -->
    <view class="" style="display: flex; align-items: center; padding: 20rpx 42rpx; flex-wrap: wrap">
      <view class="" style="font-size: 28rpx; text-align: center; width: 20%; padding-top: 10rpx" v-for="(i, k) in arr" :key="k" @tap="goods(i.classify_id)">
        <image :src="img_url + i.image" mode="" style="width: 90rpx; height: 90rpx"></image>
        <view class="">
          {{ i.name }}
        </view>
      </view>
    </view>
    <!-- 药品区 -->
    <view class="" style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0 28rpx">
      <view
        class=""
        style="width: 48%; border-radius: 20rpx; background: #fff; padding-bottom: 28rpx; margin-top: 24rpx"
        v-for="(i, k) in shoplist.list_1"
        :key="k"
        @tap="joop(i.goods_id)"
      >
        <image :src="img_url + i.goods_image" mode="aspectFill" style="width: 100%; height: 335rpx; border-radius: 20rpx"></image>
        <view class="" style="font-size: 28rpx; padding: 0 10rpx">
          {{ i.goods_name }}
        </view>
        <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 0 10rpx">
          <view class="" style="color: #e50014">
            <text style="font-size: 24rpx">￥</text>
            <text style="font-size: 36rpx">{{ i.price.split('.')[0] }}.</text>
            <text style="font-size: 24rpx">{{ i.price.split('.')[1] }}</text>
          </view>
          <view class="" style="font-size: 24rpx; color: #666">已售{{ i.seles }}件</view>
        </view>
        <view
          class=""
          style="
            width: 106rpx;
            text-align: center;
            line-height: 36rpx;
            font-size: 22rpx;
            color: #e50014;
            height: 36rpx;
            background: #ffedee;
            border-radius: 4rpx;
            margin-left: 15rpx;
          "
        >
          多买优惠
        </view>
      </view>
    </view>
    <!-- 精品优选 -->
    <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 30rpx 52rpx">
      <view class="" style="font-size: 32rpx; font-weight: bold">精品优选</view>
      <view class="" @tap="more(2)">
        <u-icon name="arrow-right-double" color="#666666" size="26" label="更多" label-pos="left"></u-icon>
      </view>
    </view>
    <!-- 药品区 -->
    <view class="" style="display: flex; align-items: center; flex-wrap: wrap">
      <view
        class=""
        style="width: 44.6%; border-radius: 20rpx; background: #fff; padding-bottom: 28rpx; margin-top: 24rpx; margin-left: 28rpx"
        v-for="(i, k) in shoplist.list_2"
        :key="k"
        @tap="joop(i.goods_id)"
      >
        <image :src="img_url + i.goods_image" mode="aspectFill" style="width: 100%; height: 335rpx; border-radius: 20rpx"></image>
        <view class="" style="font-size: 28rpx; padding: 0 10rpx">
          {{ i.goods_name }}
        </view>
        <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 0 10rpx">
          <view class="" style="color: #e50014">
            <text style="font-size: 24rpx">￥</text>
            <text style="font-size: 36rpx">{{ i.price.split('.')[0] }}.</text>
            <text style="font-size: 24rpx">{{ i.price.split('.')[1] }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 限量秒杀 -->
    <view class="" style="margin: 26rpx 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 44rpx">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 30rpx 26rpx 10rpx 26rpx">
        <view class="" style="font-size: 32rpx; font-weight: bold">限量秒杀</view>
        <view class="" @tap="more(3)">
          <u-icon name="arrow-right-double" color="#666666" size="26" label="更多" label-pos="left"></u-icon>
        </view>
      </view>
      <view class="" style="font-size: 24rpx; color: #999; padding-left: 23rpx">每一个ID限购一件</view>
      <!-- 秒杀的商品 -->
      <view class="" style="display: flex; align-items: center; justify-content: space-between; margin-top: 38rpx; padding: 0 28rpx">
        <view
          class=""
          style="width: 204rpx; background: #fff; box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.1); border-radius: 20rpx; padding-bottom: 15rpx"
          v-for="i in shoplist.list_3"
          @tap="joops(i.goods_id)"
        >
          <image :src="img_url + i.goods_image" mode="" style="width: 204rpx; height: 204rpx; border-radius: 20rpx"></image>
          <view class="" style="font-size: 26rpx">
            {{ i.goods_name }}
          </view>
          <view class="" style="font-size: 22rpx; color: #999999; text-decoration: line-through">单价{{ i.price }}/盒</view>
          <view class="" style="color: #e50014">
            <text style="font-size: 22rpx">秒杀价</text>
            <text style="font-size: 26rpx">{{ i.seckill_price }}</text>
            <text style="font-size: 22rpx">盒</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 产品上新 -->
    <view class="" style="display: flex; align-items: center; justify-content: center">
      <image src="https://wenzhen.fuerle168.com/static/shop/l0.png" mode="" style="width: 30rpx; height: 22rpx; padding-right: 10rpx"></image>
      <view class="" style="font-size: 32rpx; font-weight: bold">产品上新</view>
      <image src="https://wenzhen.fuerle168.com/static/shop/r0.png" mode="" style="width: 30rpx; height: 22rpx; padding-left: 10rpx"></image>
    </view>
    <!-- 药品区 -->
    <view class="" style="display: flex; align-items: center; flex-wrap: wrap">
      <view
        class=""
        style="width: 44.6%; border-radius: 20rpx; background: #fff; padding-bottom: 28rpx; margin-top: 24rpx; position: relative; margin-left: 28rpx"
        v-for="i in shoplist.list_4"
        @tap="joop(i.goods_id)"
      >
        <image :src="img_url + i.goods_image" mode="aspectFill" style="width: 100%; height: 335rpx; border-radius: 20rpx"></image>
        <view
          class=""
          style="
            width: 68rpx;
            height: 36rpx;
            background: linear-gradient(0deg, #1a9eff 0%, #0fb8ff 100%);
            border-radius: 20rpx 10rpx 10rpx 0;
            color: #fff;
            text-align: center;
            line-height: 36rpx;
            font-size: 24rpx;
            position: absolute;
            top: 0;
          "
        >
          New
        </view>
        <view class="" style="font-size: 28rpx; padding: 0 10rpx">
          {{ i.goods_name }}
        </view>
        <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 0 10rpx">
          <view class="" style="color: #e50014">
            <text style="font-size: 24rpx">￥</text>
            <text style="font-size: 36rpx">{{ i.price.split('.')[0] }}.</text>
            <text style="font-size: 24rpx">{{ i.price.split('.')[1] }}</text>
          </view>
          <view class="" style="font-size: 24rpx; color: #666">已售{{ i.seles }}件</view>
        </view>
        <view
          class=""
          style="
            width: 106rpx;
            text-align: center;
            line-height: 36rpx;
            font-size: 22rpx;
            color: #e50014;
            height: 36rpx;
            background: #ffedee;
            border-radius: 4rpx;
            margin-left: 15rpx;
          "
        >
          多买优惠
        </view>
      </view>
    </view>
    <!-- 全部商品 -->
    <view class="" style="font-size: 26rpx; color: #666; text-align: center; padding-top: 35rpx; padding-bottom: 35rpx" @tap="all">全部商品>></view>
    <view class="" style="position: fixed; bottom: 220rpx; right: 22rpx" @tap="shopchat">
      <view class="" style="width: 136rpx; height: 136rpx; text-align: center; position: relative">
        <image src="https://wenzhen.fuerle168.com/static/shop/xx.png" mode="" style="width: 136rpx; height: 136rpx"></image>
        <view class="" style="font-size: 26rpx; position: absolute; top: 87rpx; left: 42rpx">消息</view>
        <view class="" style="width: 12rpx; height: 12rpx; border-radius: 50%; background: #e50014; position: absolute; top: 23rpx; right: 23rpx" v-if="count != 0"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      img_url: this.img_url,
      background: {
        background: '#FFFFFF'
      },
      list: [],

      arr: [
        {
          name: '妇科'
        },
        {
          name: '儿科'
        },
        {
          name: '男科'
        },
        {
          name: '皮肤科'
        },
        {
          name: '消化科'
        }
      ],
      shoplist: [],
      count: null
    };
  },
  methods: {
    more(e) {
      uni.navigateTo({
        url: '/shop/loadmore/loadmore?id=' + e
      });
    },
    goods(e) {
      uni.navigateTo({
        url: '/shop/allshop/allshop?id=' + e
      });
    },
    unread() {
      this.api({
        url: '/api/shop/unread',
        method: 'post'
      }).then((res) => {
        this.count = res.data.count;
      });
    },
    shopchat() {
      uni.navigateTo({
        url: '/shop/shopchat/shopchat'
      });
    },
    all() {
      uni.navigateTo({
        url: '/shop/allshop/allshop'
      });
    },
    user() {
      uni.navigateTo({
        url: '/shop/shopuser/shopuser'
      });
    },
    car() {
      uni.navigateTo({
        url: '/shop/shopcar/shopcar'
      });
    },
    joop(e) {
      uni.navigateTo({
        url: '/shop/shopdetail/shopdetail?id=' + e
      });
    },
    joops(e) {
      uni.navigateTo({
        url: '/shop/shopdetail/shopdetail?id=' + e + '&type=1'
      });
    },
    shop() {
      this.api({
        url: '/api/shop/getClassify',
        mentod: 'post'
      }).then((res) => {
        console.log(res.data);
        this.arr = res.data;
      });
    },
    get() {
      this.api({
        url: '/api/common/carousel',
        method: 'post',
        data: {
          type: 2
        }
      }).then((res) => {
        this.list = [];
        res.data.map((i) => {
          this.list.push({ image: this.img_url + i.image });
        });
      });
      this.api({
        url: '/api/shop/getGoodsList',
        method: 'post'
      }).then((res) => {
        this.shoplist = res.data;
      });
    }
  },
  onShow() {
    this.shop();
    this.get();
    this.unread();
  }
};
</script>

<style>
page {
  background: #f8f8f8;
}
</style>
